<template>
  <div>
    <div>
      <input type="file" accept="image/jpeg,image/png,image/jpg,image/bmp" @change="getImgForBase64($event)">
    </div>
    <div class="wrapper">
      <vueCropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :autoCrop="true"
        :canScale="false"
        :autoCropWidth="250"
        :autoCropHeight="350"
        :fixedBox="true"
        :canMove="false"
        mode="contain"
        :high="false"
      ></vueCropper>

      <div class="btn">
        <a @click="save()">保存</a>
        <a @click="finish()">剪切</a>
      </div>
    </div>
  </div>
  <!--<img src="../assets">-->
</template>

<script>
import { canvasDataURL } from './compress.js'
  import { VueCropper }  from 'vue-cropper'
  export default {
    data: function () {
      return {
        previews: {},
        option: {
          img: '',//裁切图片的地址
          outputSize: 0.5,//裁剪生成图片的质量 0.1-1
          full: false,//是否输出原图比例的截图
          outputType: 'jpg',//裁剪生成图片的格
        },
        imgData:''
      }
    },
    created(){

    },
    methods: {
      finish () {
        var that = this
        this.$refs.cropper.getCropData((data) => {
          // do something
          that.imgData = data
          if(that.$route.query.type){
            localStorage.setItem('zpImgForZpbg',data)
          }else {
            localStorage.setItem('zpImgAddress',data)
          }

        })
      },
      getImgForBase64(e){
        var that = this
        var file = e.target.files[0]
        var size = e.target.files[0].size
        size= (size / 1024).toFixed(1)
        console.log(size)
        if(size>200){
          Toast("图片大小不能超过200k")
          return
        }
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = function(e) {
          that.option.img=this.result
        }
      },
      save(){
        var formData = new FormData()
        formData.append('file',this.convertBase64UrlToBlob(this.imgData))
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };  //添加表头
        this.$axios.post('/personalWeb/myInformation/photoUpload/croppedPhotoAndSave',formData,config)
          .then(data=>{
            console.log(data)
            if(data.statusText=='OK'){
              Toast('保存成功')
              this.$router.go(-1)
            }
          })
      },
      convertBase64UrlToBlob(urlData){
        var bytes=window.atob(urlData.split(',')[1]);
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
          ia[i] = bytes.charCodeAt(i);
        }
        return new Blob( [ab] , {type : 'image/jpg'});
      },
      submit(){

      }
    },
    components: {
      VueCropper
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css">
  body,html{
    height: 100%;
  }
  .box{
    position: relative;
    height: 100%;
  }
  .wrapper{
    /*position: fixed;*/
    width: 100%;
    top: 0;
    height: 400px;
    margin:0 auto;
  }
  .vue-cropper{
    background: black;
    background-image: none!important;
  }
  .btn{
    height: 50px;
    background: #565656;
    width: 100%;
    padding: 0 15px;
  }
  .btn a{
    color: white;
    font-size: .16rem;
    display: inline-block;
    line-height: 50px;
  }
  .btn a:nth-of-type(1){
    float: left;
  }
  .btn a:nth-of-type(2){
    float: right;
  }
</style>
